<!-- 商品详情页面 -->
<template>
	<view class="goods-detail-container">
		<!-- 滑动轮播图区域 -->
		<view class="swiper">
			<swiper :interval="3000" :duration="1000" circular :current="swiperListIndex" @change="swiperListTab">
				<swiper-item v-for="(item,index) in swiperList" :key="item.id">
					<image :src="item" @click="imgPreview(index)"></image>
				</swiper-item>
			</swiper>

			<view class="active-index">
				<text>{{swiperListIndex+1}} / {{swiperList.length}}</text>
			</view>
		</view>

		<view class="goods-name" v-if="goodsDetail.price">
			{{goodsDetail.name}}
		</view>
		<view class="price-num" v-if="goodsDetail.price">
			<text class="now-price">￥{{goodsDetail.price}}</text> 保底价：{{goodsDetail.floorPrice}}元 <text
				class="num">库存：{{goodsDetail.stock}}</text>
			<!-- <button open-type="share">
				<image src="/static/icons/details_name_button_share@3x.png" class="share-pic" @click="share"></image>
			</button> -->
			<image src="/static/icons/details_name_button_share@3x.png" class="share-pic" @click="share"></image>
		</view>

		<view class="detail-name">
			商品详情
		</view>
		<!-- <view class="wine-intro">
			酒 · 简介
		</view> -->
		<view class="detail-desc" v-if="goodsDetail.content">
			<rich-text :nodes="richText|formatRichText"></rich-text>
		</view>

		<!-- 购物车 -->
		<!-- 商品导航组件 -->
		<view class="goods_nav">
			<view class="icons">
				<view class="icon-collect" @click="collectProducts(goodsDetail._id)">
					<!-- 未收藏图标 -->
					<image src="/static/icons/my_function_collection@3x.png" v-if="goodsDetail.isCollection==='0'">
					</image>
					<!-- 收藏图标 -->
					<image src="/static/icons/details_bar_button_collection@3x.png" v-else></image>
					<text>收藏</text>
				</view>
				<view class="icon-cart" @click="toCart()">
					<image src="/static/icons/details_bar_button_shopping@3x.png"></image>
					<text>购物车</text>
					<!-- <view class="badge">
						<uni-badge type="error" :text="cartNum"></uni-badge>
					</view> -->
				</view>

			</view>
			<view class="add-cart" @click="addToCart">
				加购物车
			</view>
			<view class="to-buy" @click="showBuyBox()">
				立即购买
			</view>
			<!-- 底部弹出层 -->
		</view>
		<!-- 遮罩 -->
		<view class="mask" v-if="showMask">
			<!-- 底部弹出层组件-->
			<view class="mask">
			</view>
			<my-popup :goodsDetail="goodsDetail" @close='closePopUp'></my-popup>
		</view>


		<!-- 生成海报 -->
		<view class="creat-poster" v-if="showPoster" @click="hidePoster">
			<QSPopup ref="popup">
				<view class="flex_column">
					<view class="backgroundColor-white ">
						<view class="img-box">
							<image :src="imgUrl || ''" mode="widthFix" class="posterImage"></image>
							<view class="name">
								{{textName}}
							</view>
							<view class="price">
								<view class="now_p">
									￥{{goodsDetail.price}}
								</view>
								<view class="floor_p">
									保底价：{{goodsDetail.floorPrice}}元
								</view>
								<!-- <view class="">
								</view> -->
							</view>
							<view class="scan-tip">长按识别二维码</view>
							<view class="code_container">
								<image :src="codeUrl" mode="" class="code"></image>
							</view>
						</view>
					</view>
				</view>

			</QSPopup>
			<view class="share-save" v-if="!shareFlag">
				<button class="item btn" @click.stop="sendToFriends" :class="{'active':select_btn=='send'}">
					发送给好友
				</button>
				<view class="item" @click.stop="saveImg" :class="{'active':select_btn=='save'}">
					保存图片
				</view>
			</view>
			<!-- 画布 -->
			<!-- :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}" -->
			<view class="hideCanvasView">
				<canvas class="hideCanvas" id="default_PosterCanvasId" canvas-id="default_PosterCanvasId"
				
					:style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"
					
					></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import _app from '@/js_sdk/QuShe-SharerPoster/QS-SharePoster/app.js';
	// uni_modules引入方式
	import lPainter from '@/uni_modules/lime-painter/components/lime-painter/'
	import {
		getSharePoster
	} from '@/js_sdk/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			lPainter
		},
		data() {
			return {
				showMask: false,
				swiperListIndex: 0,
				goodsDetail: {},
				goodsId: '',
				cartNum: 0, // 购物车数量
				swiperList: [],
				richText: '', //商品详情 富文本
				codeUrl: '', // 二维码地址
				img_poster: '',
				base64: '',
				text: '',
				textName: '',
				text1: '',
				text3: '',
				text4: '',
				shareNum: 0,
				text5: '',
				imgUrl: '',
				postType: '默认',
				screenHeight: 0,
				showPoster: false,
				videoSource: '',
				poem: {},
				poster: {},
				posterImage: '',
				canvasId: 'default_PosterCanvasId',
				typeAry: [{
					name: '默认',
					bgImg: ''
				}],
				select_type: '默认', // 选中的海报类型
				select_btn: '',
				sharePage: false,
				shareFlag: false,
				pngUrl: '',
				poemId: ''

			};
		},
		onLoad(option) {
			// console.log(option.id)
			// this.goodsId = option.id
			this.getGoodsDetail(option.id)
			// 获取小程序码
			this.getXcxCode(option.id)

			// 如果有用户扫码了，这里可以接收到scene值
			if (option.scene) {
				const scene = decodeURIComponent(option.scene)
				// 缓存推荐人手机号
				uni.setStorageSync('recPhone', scene)
			}

		},
		// 分享
		onShareAppMessage(res) {
			console.log(res)
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res)
			}
			return {
				title: this.goodsDetail.name,
				path: '/subpkg/goods-detail/goods-detail?id=' + this.goodsDetail._id
			}
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.查找img标签有无style属性，如果没有，加上style
			 * 2.所有标签style后追加 max-width:100% !important;
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) { //控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					console.log(match.search(/style=/gi));

					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});

				newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; ');
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				return newContent;
			}
		},

		methods: {
			// 获取分享次数
			async getShareNum() {
				const {
					data: res
				} = await uni.$http.post('/banner/updateFxNum', )
				// console.log(res)
				this.shareNum = res.data
			},
			share() {
				if (JSON.stringify(this.userInfo) == '{}') {
					let redirect = '/subpkg/goods-detail/goods-detail?id=' + this.goodsDetail._id;
					uni.navigateTo({
						url: '/subpkg/login/login'
					})
					uni.setStorageSync('redirect', redirect)
					uni.$showMsg('请先登录!')
				} else {
					// 调用方法
					this.shareFc()

					this.shareFlag = false
					this.showPoster = true
					// 调用分享次数增加接口
					this.getShareNum()
				}
			},
			// 收藏商品
			async collectProducts(id) {
				if (JSON.stringify(this.userInfo) == '{}') {
					uni.navigateTo({
						url: '/subpkg/login/login'
					})
					uni.$showMsg('请先登录!')
					return
				}
				const {
					data: res
				} = await uni.$http.post('/product/collectionProduct', {
					userId: this.userInfo._id,
					productId: this.goodsDetail._id
				})

				if (res.success == '0') {
					this.getGoodsDetail(this.goodsDetail._id)
					return
				}
			},

			// 加入购物车
			async addToCart() {
				if (JSON.stringify(this.userInfo) !== '{}') {
					const {
						data: res
					} = await uni.$http.post('/cart/addCart', {
						userId: this.userInfo._id,
						productId: this.goodsDetail._id,
						num: '1'
					})
					if (res.success == '0') {
						// this.getGoodsDetail()
						this.cartNum++
						uni.$showMsg('添加成功！')
						return
					}
				} else {
					let redirect = '/subpkg/goods-detail/goods-detail?id=' + this.goodsDetail._id;
					uni.navigateTo({
						url: '/subpkg/login/login'
					})
					uni.$showMsg('请先登录!')
					uni.setStorageSync('redirect', redirect)
				}
				// console.log(res)
			},
			// 获取商品详情
			async getGoodsDetail(id) {
				const {
					data: res
				} = await uni.$http.post('/product/getProductDetails', {
					id: id,
					userId: this.userInfo ? this.userInfo._id : ''
				})
				console.log(res)
				if (res.success == '0') {
					this.goodsDetail = res.data
					this.richText = res.data.content
					console.log(res.data.imgUrls)
					this.imgUrl = res.data.imgUrl
					this.textName = res.data.name
					this.text = res.data.name
					// this.text1=res.data.name.slice(28)
					// 处理网络图片
					uni.getImageInfo({
						src: res.data.imgUrl,
						success(res) {
							uni.setStorageSync('path', res.path)
						}
					})

					this.swiperList = res.data.imgUrls.split(',')
				}

				// this.getCartList()

			},

			async getCartList() {
				const {
					data: res
				} = await uni.$http.post('/cart/getCartList', {
					userId: this.userInfo._id
				})
				// console.log(res.data)

				res.data.forEach(item => {
					this.cartNum += item.num
				})
			},




			swiperListTab(e) {
				var that = this;
				this.swiperListIndex = Number(e.target.current);
			},

			// 左侧按钮的点击事件处理函数
			toCart() {
				// 切换到购物车页面
				if (JSON.stringify(this.userInfo) !== '{}') {
					uni.navigateTo({
						url: '/subpkg/login/login'
					})
					uni.$showMsg('请先登录!')
					return
				}
				uni.switchTab({
					url: '/pages/cart/cart'
				})

			},
			// 点击立即购买，弹出购买弹框
			showBuyBox() {
				console.log('弹出抽屉')
				this.showMask = true
			},
			closePopUp() {
				this.showMask = false
			},
			// 获取小程序码
			getXcxCode(id) {
				var that = this
				var tmp = []
				// tmp.push(uni.getStorageSync('phone'))
				tmp.push(id)
				let code = tmp.join(',')

				that.image_to_base64('https://xcx.weqinqin.cn/qqxcx_interface/api/xcx/getXcxCode2?code=' + code + '&url=' +
					'subpkg/goods-detail/goods-detail')
			},
			image_to_base64(img) {
				var that = this
				return new Promise(((resolve, reject) => {
					wx.downloadFile({
						url: img,
						success(res) {
							console.log(res)
							// 暂存本地的网络图片地址
							uni.setStorageSync('code', res.tempFilePath)
							wx.getFileSystemManager().readFile({
								filePath: res.tempFilePath, //选择图片返回的相对路径
								encoding: 'base64', //编码格式
								success: res => { //成功的回调
									resolve('data:image/png;base64,' + res.data)
									that.codeUrl = 'data:image/png;base64,' + res.data
								}
							})
						}
					})

				}))
			},

			// 圆形图片
			circleImg(ctx, img, x, y, r) {
				ctx.save()
				ctx.beginPath();
				ctx.arc(img.height_r / 2, img.height_r / 2, img.height_r / 2, 0, Math.PI * 2, false);
				var d = 2 * r;
				var cx = x + r;
				var cy = y + r;
				ctx.arc(cx, cy, r, 0, 2 * Math.PI);
				ctx.clip();
				ctx.drawImage(img, x, y, d, d);
				ctx.restore()
			},

			// 分享给好友
			sendToFriends() {
				var that = this
				console.log(that.poster.finalPath)
				this.select_btn = 'send'
				// this.share()
				uni.previewImage({
					urls: [that.poster.finalPath],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log(data);
						},
						fail: function(err) {
							console.log(err);
						}
					}
				})
			},
			// 保存图片
			saveImg() {
				this.select_btn = 'save'
				this.saveImage()
				console.log('save')
			},
			hidePoster() {
				this.showPoster = false
				this.postType = "默认"
			},
			saveImage() {
				var that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
						that.showPoster = false
					}
				})
			},


			async shareFc() {
				try {
					_app.log('准备生成:' + new Date())
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: this.postType,
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([
									// {
									// 	type: 'custom',
									// 	setDraw(Context) {
									// 		Context.setFillStyle('black');
									// 		Context.setGlobalAlpha(0);
									// 		Context.fillRect(0, bgObj
									// 			.height - bgObj
									// 			.height * 0.2, bgObj
									// 			.width, bgObj
									// 			.height * 0.2);
									// 		Context.setGlobalAlpha(1);
									// 	}
									// },
									// {
									// 	type: 'image',
									// 	url: '',
									// 	alpha: .3,
									// 	dx,
									// 	dy: bgObj.height - bgObj.width *
									// 		0.25,
									// 	infoCallBack(imageInfo) {
									// 		let scale = bgObj.width * 0.2 /
									// 			imageInfo
									// 			.height;
									// 		return {
									// 			circleSet: {
									// 				x: imageInfo.width *
									// 					scale / 2,
									// 				y: bgObj.width * 0.2 /
									// 					2,
									// 				r: bgObj.width * 0.2 /
									// 					2
									// 			}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
									// 			dWidth: imageInfo.width *
									// 				scale, // 因为设置了圆形图片 所以要乘以2
									// 			dHeight: bgObj.width * 0.2,
									// 			/* roundRectSet: { // 圆角矩形
									// 				r: imageInfo.width * .1
									// 			} */
									// 		}
									// 	}
									// },
									// {
									// 	type: 'text',
									// 	fontStyle: 'italic',
									// 	// text: '长按识别二维码',
									// 	size: fontSize,
									// 	color: 'white',
									// 	alpha: .5,
									// 	textAlign: 'left',
									// 	textBaseline: 'middle',
									// 	infoCallBack(textLength) {
									// 		_app.log(
									// 			'index页面的text的infocallback ，textlength:' +
									// 			textLength);
									// 		return {
									// 			dx: bgObj.width -
									// 				textLength - fontSize,
									// 			dy: bgObj.height -
									// 				lineHeight * 3
									// 		}
									// 	},
									// 	serialNum: 0,
									// 	id: 'tag1' //自定义标识
									// },
									// {
									// 	type: 'text',
									// 	text: '',
									// 	fontWeight: 'bold',
									// 	size: fontSize,
									// 	color: 'white',
									// 	alpha: .75,
									// 	textAlign: 'left',
									// 	textBaseline: 'middle',
									// 	serialNum: 1,
									// 	allInfoCallback({ //v3.0.1 更新 可以获取drawArray中全部数据
									// 		drawArray
									// 	} = {}) {
									// 		const obj = drawArray.find(
									// 			item => item.id ===
									// 			'tag1');
									// 		return new Promise((rs,
									// 			rj) => {
									// 			setTimeout(() => {
									// 				rs({
									// 					dx: obj
									// 						.dx,
									// 					dy: obj
									// 						.dy +
									// 						lineHeight
									// 				});
									// 			}, 1);
									// 		});
									// 	}
									// },
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});

					this.posterImage = d.poster.tempFilePath;
					this.$refs.popup.show()
				} catch (e) {

				}

				let ww, hh;
				const query = uni.createSelectorQuery().in(this);
				query.select('#default_PosterCanvasId').boundingClientRect(data => { //获取canvas-dom
					ww = data.width; //准确的宽高
					hh = data.height
					var ctx = uni.createCanvasContext('default_PosterCanvasId') //绑定画布
					switch (this.postType) {
						case '默认':
							ctx.drawImage('/static/bgimgs/default@2x.png', 0, 0, ww,
								hh); //填充进图片
							console.log('测试默认')
							break;
						default:
							ctx.drawImage('/static/bgimgs/default@2x.png', 0, 0, ww,
								hh); //填充进图片
							break;
					}
					// 画小程序码
					var that = this
					let code = uni.getStorageSync('code')
					that.circleImg(ctx, code, 465, 810, 70)
					ctx.setFontSize(28);
					ctx.setFillStyle('#333') //设置内容3的文字样式


					// 商品名称，超区域换行

					var chr = this.text.split("");
					var temp = "";
					var row = [];
					ctx.setFontSize(28)
					ctx.setFillStyle("#333")
					for (var a = 0; a < chr.length; a++) {
						if (ctx.measureText(temp).width < ww - 200) {
							temp += chr[a];
						} else {
							a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
							row.push(temp);
							temp = "";
						}
					}
					row.push(temp);
					//如果数组长度大于2 则截取前两个
					if (row.length > 2) {
						var rowCut = row.slice(0, 2);
						var rowPart = rowCut[1];
						var test = "";
						var empty = [];
						for (var a = 0; a < rowPart.length; a++) {
							if (ctx.measureText(test).width < ww - 200) {
								test += rowPart[a];
							} else {
								break;
							}
						}
						empty.push(test);
						var group = empty[0] + "..." //这里只显示两行，超出的用...表示
						rowCut.splice(1, 1, group);
						row = rowCut;
					}
					for (var b = 0; b < row.length; b++) {
						ctx.fillText(row[b], 50, 680 + b * 30);
					}


					// 商品价格
					ctx.setFillStyle('#ff1111')
					ctx.setFontSize(26);
					ctx.fillText('￥' + this.goodsDetail.price, 45, 760)
					// 保底价
					ctx.setFillStyle('#999')
					ctx.setFontSize(24);
					ctx.fillText('保底价：' + this.goodsDetail.floorPrice, 155, 760)


					// 画提示文字
					ctx.setFillStyle('#23B2ED')
					ctx.setFontSize(20);
					ctx.fillText('长按识别二维码', ww / 2 + 140, 800)

					uni.showLoading({ //增加loading等待效果
						mask: true,
						title: '海报生成中...'
					})

					// 画 中心图片
					var that = this
					let path = uni.getStorageSync('path')
					ctx.drawImage(path, 0, 0, ww, ww);
					// ctx.drawImage(path,130, 125, 450, 450);
					console.log(path, 8)
					// ctx.drawImage(path, 40, 245, 566, 566);


					ctx.draw(false, () => {
						setTimeout(() => { //不加延迟的话，base64有时候会赋予undefined
							uni.canvasToTempFilePath({
								canvasId: 'default_PosterCanvasId',
								success: (res) => {
									that.poster.finalPath = res
										.tempFilePath
									console.log(res
										.tempFilePath, 'temp')
									if (that.shareFlag) {
										uni.previewImage({
											urls: [res
												.tempFilePath
											],
											longPressActions: {
												itemList: ['发送给朋友', '保存图片',
													'收藏'
												],
												success: function(data) {
													console.log(
														'选中了第' + (
															data
															.tapIndex +
															1) +
														'个按钮,第' + (
															data
															.index +
															1) +
														'张图片');
												},
												fail: function(err) {
													console.log(err
														.errMsg);
												}
											}
										})
										// 关闭海报
										that.showPoster = false
									}

								}
							})
							uni.hideLoading();
						}, 2000)
					}); //输出到画布中

				}).exec();
			},

		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState('m_cart', ['cart']),

		}
	}
</script>

<style lang="scss">
	
	.active {
		background: #B91111;
	}
	
	.share-pic {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		right: 10rpx;
	}

	// 底部弹出层
	.popup {
		position: fixed;
		bottom: 0;
		height: 616rpx;
		width: 100%;
		background-color: #fff;
	}


	.goods-detail-container {
		// 给页面外层的容器，添加 50px 的内padding，
		// 防止页面内容被底部的商品导航组件遮盖
		padding-bottom: 100rpx;
		width: 100%;
		overflow-x: hidden;
	}

	.goods_nav {
		// 为商品导航组件添加固定定位
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: 500;
		color: #FFFFFF;

		.add-cart {
			width: 216rpx;
			background-color: #D1D1D1;
		}

		.to-buy {
			width: 216rpx;
			background-color: #D80E0E;
		}

		.icons {
			width: 318rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
			padding-top: 10rpx;
			box-sizing: border-box;

			.icon-collect {
				padding-left: 30rpx;
			}

			.icon-cart {
				padding-right: 30rpx;
				position: relative;

				.badge {
					position: absolute;
					right: 8rpx;
					top: -12rpx;
				}
			}

			.icon-collect,
			.icon-cart {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				box-sizing: border-box;

				image {
					width: 45rpx;
					height: 40rpx;
					margin: auto;
				}

				text {
					height: 40rpx;
					line-height: 40rpx;
				}
			}

		}
	}

	
	.swiper {
		position: relative;

		.active-index {
			width: 78rpx;
			height: 32rpx;
			line-height: 32rpx;
			background: #000000;
			opacity: 0.36;
			border-radius: 16rpx;
			position: absolute;
			right: 22rpx;
			bottom: 22rpx;
			z-index: 999;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
		}
	}

	swiper {
		width: 100%;
		height: 562rpx;
		background-color: #c2d9fe;

		image {
			height: 562rpx;
			width: 100%;
		}


	}

	.goods-name {
		// height: 128rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		padding: 33rpx 26rpx 26rpx;
		box-sizing: border-box;

	}

	.price-num {
		height: 35rpx;
		line-height: 35rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		padding: 0 20rpx;
		display: flex;
		position: relative;

		.now-price {
			font-size: 42rpx;
			color: #FF1111;
			margin-right: 16rpx;
		}

		.num {
			margin-left: 50rpx;
		}

		// image {
		// 	width: 35rpx;
		// 	height: 35rpx;
		// 	position: absolute;
		// 	right: 10rpx;
		// }
	}

	.detail-name {
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1px solid #E5E5E5;
		margin-top: 30rpx;
		padding-left: 34rpx;
	}

	.wine-intro {
		height: 108rpx;
		line-height: 108rpx;
		padding-left: 25rpx;
		font-size: 48rpx;
		font-weight: 500;
		color: #5E3F45;
	}

	.detail-desc {
		width: 100%;
		overflow-x: hidden;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		// padding: 0 24rpx;
		line-height: 48rpx;
		margin-bottom: 80rpx;
		// padding-top: 30rpx;
	}

	.goods-img {
		height: 551rpx;
		background-color: #accaf8;
		width: 100%;
		margin-top: 60rpx;
		margin-bottom: 30rpx;
	}



	// 海报
	.creat-poster {
		background-color: rgba(0, 0, 0, .3);
		height: 100%;
		z-index: 999999;
		position: fixed;
		top: 50%;
		left: 0;
		bottom: 0;
		right: 0;
		transform: translateY(-50%);
		background-color: rgba(0, 0, 0, .6);
		padding-bottom: 150rpx;
	}


	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
		width: 85vw;
		margin: auto;
		// height: 134vw;
		margin-top: 10vh;
		// padding: 0 5.5vw;
		box-sizing: border-box;

		// .title {
		// 	font-size: 34rpx;
		// 	font-weight: 500;
		// 	color: #333333;
		// 	margin-top: 114rpx;
		// 	margin-bottom: 45rpx;
		// }

	}

	.share-save {
		display: flex;
		justify-content: space-between;
		padding: 0 53rpx !important;
		margin-top: 30rpx;

		.item {
			width: 298rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #B91111;
			opacity: 0.77;
			border-radius: 12rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFF5F5;
		}

		.btn {
			background-color: transparent;
			margin-top: 0;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}
	}


	.padding1vh {
		// padding: 2vh;
	}

	.posterImage {
		width: 85vw;
		margin: auto;
		height: 85vw !important;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 8vh;
	}

	// 
	.send_guide {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 999;
		background-color: #fff;
	}

	.img-box {
		position: relative;

		.code {
			// position: absolute;
			// top: 57vh;
			// left: 61vw;
			border-radius: 50%;
			z-index: 99999;
			width: 20vw;
			height: 20vw;
			margin-right: 25rpx;
			margin-bottom: 30rpx;
		}

		.scan-tip {
			padding: 0 28rpx;
			// position: absolute;
			z-index: 99999;
			font-size: 20rpx;
			font-weight: 500;
			color: #23B2ED;
			text-align: right;
			margin-top: 20rpx;
			// top: 54.5vh;
			// left: 61vw;
		}

		.poem-pic {
			// position: absolute;
			z-index: 99999;
			// top: 19vh;
			// left: 50%;
			// transform: translateX(-50%);
			// width: 77.87vw;
			// height: 20vh;
			// height: 43.73vw;
		}

		.title1 {
			position: absolute;
			left: 5vw;
			top: 7vh;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			z-index: 99999;
		}

		.title2 {
			position: absolute;
			left: 5vw;
			top: 10vh;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			z-index: 99999;
		}

		.title3 {
			position: absolute;
			left: 5vw;
			top: 13.8vh;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			z-index: 99999;

			.num {
				color: #BA460C;
			}
		}


		.posterImage {
			// position: absolute;
			z-index: 99;
			width: 100%;

		}

		.name {
			padding: 0 25rpx;
			margin: 0 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-wrap: wrap;
		}

		.code_container {
			display: flex;
			width: 100%;
			justify-content: flex-end;

		}

		.price {
			display: flex;
			padding: 0 40rpx;
			align-items: center;

			.now_p {
				font-size: 30rpx;
				color: #FF1111;
				margin-right: 16rpx;
			}

			.floor_p {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}

	}
</style>
